import type { Component } from "vue";
import type { SvgIconProps } from "./type";
import IconifyIcon from "./components/iconifyIcon.vue";
import LocalSvg from "./components/localSvg.vue";
// import { watch } from "vue";

export const SvgIcon: Component = (props: SvgIconProps) => {
  // 如果传入的 name 不包含 &，则直接返回 null
  if (!props.name.includes("&")) {
    return null;
  }

  // 如果传入的 name 包含 &，则进行分割
  const splitName = props.name.split("&");
  const svgSource = splitName[0];
  const svgName = splitName[1];
  // svgSource 为 local 时，表示本地svg图标
  if (svgSource == "local") {
    return <LocalSvg name={svgName} style={props.style} class={props.class} />;
  }
  // svgSource 为 iconify 时，表示使用 iconify 图标
  else if (svgSource == "iconify") {
    return <IconifyIcon name={svgName} style={props.style} class={props.class} />;
  }
  // svgSource 为 icon 时，表示使用 css 图标
  else if (svgSource == "icon") {
    // iconfont 图标名命规范 icon-{文件名}-{图标名}
    const iconNameArr = props.name.split("&")[1].split("-");
    const iconNameStr = iconNameArr[0];
    const iconName = `icon-${iconNameArr[1]}`;
    return <i class={`${iconNameStr} ${iconName}`} style={props.style}></i>;
  }
};
export default SvgIcon;
